
const imgMap = {
	'running': '/base/img/node/running.png',
	'success': '/base/img/node/success.png',
	'failed': '/base/img/node/failed.png',
	'setting': '/base/img/node/failed.png',

	'PENDING': '/base/img/node/wait.png',
	'RUNNING': '/base/img/node/running.png',
	'STOPED': '/base/img/node/failed.png',
	'SUCCEEDED': '/base/img/node/success.png',
	'FAILED': '/base/img/node/failed.png',
}
const defaultPorts = {
	groups: {
		top: {
			position: 'top',
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: '#d7404c85',
					strokeWidth: 1,
					fill: '#fff',
					style: {
						visibility: 'visible',
					},
				},
			},
		},
		bottom: {
			position: 'bottom',
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: '#389e0d94',
					strokeWidth: 1,
					fill: '#fff',
					style: {
						visibility: 'visible',
					},
				},
			},
		},
	},
	items: [
		{
			group: 'top',
		},
		{
			group: 'bottom',
		}
	],
}
function graphRegister() {
	X6.Graph.registerNode(
		'dag-node',
		{
			inherit: 'rect',
			width: 180,
			height: 40,
			label: 'labe name',
			markup: [
				{
					tagName: 'rect',
					selector: 'body',
				},
				{
					tagName: 'image',
					selector: 'img',
				},
				{
					tagName: 'text',
					selector: 'label',
				},
			],
			attrs: {
				body: {
					stroke: '#d4d7da',
					strokeWidth: 1,
					fill: '#fff',
					rx: 0,
					ry: 0,
				},
				img: {
					'xlink:href': '/base/img/node/setting.png',
					width: 32,
					height: 32,
					x: 6,
					y: 6,
				},
			},
			ports: {
				...defaultPorts,
				items: [
					//{
					//group: 'top'
					//},
					//{
					//group: 'bottom'
					//}
				]
			},
		},
		true,
	);
	
	X6.Shape.HTML.register({
	// X6.Graph.registerNode('dag-html',{
	  shape: 'custom-html',
	   width: 180,
	   height: 40,
	   effect: ['data'],
	   html(cell) {
	     const node = cell.getData()
	     let logo = `/base/img/node/${node.type}-x32.png`
	     let nodeStatus = 'none'
	     let statusImg = '/base/img/node/NoneStatus-x32.png'
	     if(node.status){
			 nodeStatus = node.status
			 statusImg = imgMap[node.status]
		 }
		 //let nodeCustomerClass = 'customer-node-box'
		 /**/let nodeCustomerClass = 'customer-node-box-not'
		 if(node.id == 'psi' || node.id == 'read_data' || node.id == 'table_statistics' 
			|| node.id == 'union' || node.id == 'train_test_split' || node.id == 'sample'){
			 nodeCustomerClass = 'customer-node-box'
		 }
	     return `
		    <div class="node ${nodeStatus} ${nodeCustomerClass}">
		      <img src="${logo}" alt="logo" />
		      <span class="label">${node.label}</span>
		      <span class="status">
		        <img src=${statusImg} alt="${node.label}" />
		      </span>
		    </div>
		  `
	   },
		ports: {
			...defaultPorts,
			items: []
		},
	 });
	 
	// 注册连接线
	X6.Graph.registerEdge(
		'dag-edge',
		{
			inherit: 'edge',
			attrs: {
				line: {
					stroke: '#C2C8D5',
					strokeWidth: 1,
					targetMarker: null,
				},
			},
		},
		true,
	)

	X6.Graph.registerConnector(
		'algo-connector',
		(s, e) => {
			const offset = 4
			const deltaY = Math.abs(e.y - s.y)
			const control = Math.floor((deltaY / 3) * 2)

			const v1 = { x: s.x, y: s.y + offset + control }
			const v2 = { x: e.x, y: e.y - offset - control }

			return X6.Path.normalize(
				`M ${s.x} ${s.y}
			       L ${s.x} ${s.y + offset}
			       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
			       L ${e.x} ${e.y}
			      `,
			)
		},
		true,
	)

}